<template>
  <div
    ref="main4"
    id="mai4"
    style="width: 100%; height: 100%; margin: auto"
  ></div>
</template>

<script>
export default {
  props: {
    dataList:{
      type:Object
    }
  },
  mounted() {
    // this.drawChart();
  },
  methods: {
    drawChart() {
      console.log(this.dataList,'产业发展饼图中的数据')
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      // let myChart = this.$echarts.init(document.getElementById("main"));
      let myChart = this.$echarts.init(this.$refs.main4);
      //职称结构取数
      var getname = ["实用新型", "外观设计", "发明专利"];
      var getvalue = [this.dataList.syzlzb, this.dataList.wgzlzb, this.dataList.fmzlzb];
      var data = [];
      for (var i = 0; i < getname.length; i++) {
        data.push({
          name: getname[i],
          value: getvalue[i],
        });
      }
      var colorList = ["#86DEDE", "#7DFBC3", "#2A66F6", "#00FCFD"];
      var rich = {
        name: {
          color: "#FFF",
          fontSize: 14,
          padding: [10, 15, 0, 10],
          fontWeight: "400",
          align: "left",
        },
        value: {
          color: "#FFF",
          fontSize: 15,
          padding: [10, 10, 0, 15],
          fontWeight: "500",
          align: "right",
        },
        percent: {
          color: "#FFF",
          align: "right",
          fontSize: 15,
          fontWeight: "500",
          //padding: [0, 5]
        },
        hr: {
          width: "100%",
          height: 0,
        },
        cir: {
          fontSize: 26,
        },
      };
      //职称结构图表

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "",
          left: "center",
          top: 0,
          textStyle: {
            color: "#ccc",
          },
        },
        backgroundColor: "",
        tooltip: {
          trigger: "axis",
        },
        legend: {
          show: true,
          //   orient: "vertical",
          bottom: "5%",
          left: "center",
          itemGap: 30,
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          data: getname,
        },
        series: [
          {
            itemStyle: {
              normal: {
                borderColor: "#003786",
                borderWidth: 5,
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            type: "pie",
            silent: true, //取消高亮
            radius: ["25%", "60%"],
            center: ["50%", "45%"],
            label: {
              show: true,
              color: "#fff",
              fontSize: 10,
              formatter: function (params) {
                return params.name + "\n" + "(" + params.value + "%)";
              },
            },
            labelLine: {
              show: true,
              length: 10,
              length2: 10,
              lineStyle: {
                color: "#fff",
              },
            },
            // labelLine: {
            //   normal: {
            //     length: 30,
            //     length2: 0,
            //     lineStyle: {
            //       color: "transparent",
            //     },
            //   },
            // },
            // label: {
            //   normal: {
            //     formatter: (params) => {
            //       return (
            //         "{name|" +
            //         params.name +
            //         "}{value|" +
            //         params.value +
            //         "}\n{hr|————————}"
            //       );
            //     },
            //     rich: rich,
            //     padding: [-20, 25, 0, 25],
            //   },
            // },
            data: data,
            z: -1,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      var currentIndex = -1;

      //  let myChart = echarts.getInstanceByDom(document.getElementById("chart-panel"))
      var dataLen = option.series[0].data.length;
      var timer = 0;
      setInterval(() => {
        //  计时器增加
        timer++;
        // if (timer == 5) {
        //   for (let index in arr) {
        //     arr[index].value = (Math.random() * 50 + 100).toFixed(0);
        //   }
        //   myChart.setOption({
        //     series: [
        //       {
        //         data: arr
        //       }
        //     ]
        //   });
        //   timer = 1;
        // }
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
      }, 2000);
    },
  },
};
</script>

<style></style>
